<template>
    <div class="loginBox" v-if="isShowLogin">
      <el-form ref="form" :model="ruleForm" label-width="80px">
        <div class="loginContent">
          <div class="loginTitleBox">E-D集合开发框架后台管理系统&nbsp;&nbsp;</div>
          
          <div class="formItemBox">
            <el-input
              placeholder="请输入帐号"
              suffix-icon="fa fa-user-circle fa-lg"
              v-model="ruleForm.username">
            </el-input>
          </div>
          <div class="formItemBox">
            <el-input
              placeholder="请输入密码"
              suffix-icon="fa fa-unlock-alt fa-lg"
              v-model="ruleForm.password">
            </el-input>
          </div>
          <div class="formItemBox">
              <el-button type="primary" style="width:100%" @click="onSubmit">立即登录</el-button>
          </div>
        </div>
        
      </el-form>  
    </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
export default {
  data(){
    return {
      ruleForm: {
        username : "",
        password : ""
      }
    }
  },
  mounted(){
    //判断是否登录
    if(!this.$userData.getUserInfo()){

      //显示登录遮罩
      this['LoginModule/updateLogin'](true)

    }else{

      //消除登录遮罩
      this['LoginModule/updateLogin'](false)

    }
  },
  computed: {
     ...mapState({
        isShowLogin : state => state.LoginModule.isShowLogin
      })
  },
  methods: {
    ...mapMutations(['updateLogin', 'LoginModule/updateLogin']),
    clickShutDown(){
      this.$myPop.alertBox("皮皮的开发人员提示","开个玩笑而已，放心，不会关的",()=> {
        //请写关机逻辑
      })
    },
    onSubmit(){

      //登录请求参数
      var params = {
        u_username : this.ruleForm.username,
        u_password : this.ruleForm.password
      }
  
      this.$myLoading.startLoading()
      this.$http.postHttp(this.$API.systemApiLogin,params,(data)=>{

        this.$myLoading.endLoading()
        
        //将权限信息存储在本地
        sessionStorage.setItem("totalMenuBar",JSON.stringify(data.menuData))
        sessionStorage.setItem("userInfo",JSON.stringify(data.userInfo))

        //消除登录遮罩
        this['LoginModule/updateLogin'](false)

        //更新菜单数据
        this.$store.commit('MenuModule/getDataTabs',this)

        //进入首页
        this.$router.push({
          path: "/home"
        });

      })
      
    }
  }
}
</script>

<style lang="stylus" scoped>
.loginBox {
  position absolute
  left 0px
  right 0px 
  overflow  none
  top 0px 
  bottom 0px
  background #fff
  z-index 999

  .loginTitleBox {
    width 100%
    height 80px
    margin-bottom 20px
    text-align center
    line-height 80px

    font-size 18px
  }

  .loginContent {
    width 360px
    height 400px
    background #fff
    left 50%
    position absolute
    top 50%
    text-align center
    border-radius 5px
    margin-left -180px
    box-shadow 0 0 8px rgba(81, 81,81,0.8)
    margin-top -200px
    padding 20px
  }

  .formItemBox {
    width 100%
    height 40px
    margin-bottom 20px
    text-align center
  }
}
</style>
